
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/test2/js/jquery.js"></script>
    <style>
        table{
            table-layout: fixed;
        }

        .red{
            color:red
        }
        img{
            width: 40px;
            height: 40px;
            border-radius: 20%;
        }
    </style>
</head>
<body>
    欢迎 ${loginUser.username}<img src="${loginUser.url}">
    <div class="searchBox">
        <form>
            <input type="text" name="bookName" id="bookName" placeholder="书名">
            <input type="text" name="bookWriter" id="bookWriter" placeholder="作者">
            <input type="text" name="bookType" id="bookType" placeholder="类型">
            出版时间范围<input type="Date" name="beginDate" id="beginDate">
            <input type="Date" name="endDate" id="endDate">
            <input type="button" value="查找" id="searchBtn">
            <a href="insert.jsp"> 添加书籍</a>
        </form>
    </div>

    <div>
        <table border="1" width="600px">
            <thead>
                <th>封面</th>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>类型</th>
                <th>价格</th>
                <th>出版时间</th>
                <th>操作</th>
            </thead>
            <tbody>

            </tbody>
        </table>
        <select id="pageSize">
            <option value="5">5</option>
            <option value="10" selected>10</option>
            <option value="15">15</option>
            <option value="20">20</option>
        </select>
    </div>

    <div id="pageBar">

    </div>
</body>
<script>
    $("#searchBtn").click(function(){
        searchBook(1);
    })

    $("#pageSize").change(function(){
        searchBook(1);
    })

    searchBook(1);
    function searchBook(pageNum){
        $("tbody").empty();
        let bookName = $("#bookName").val();
        let bookWriter = $("#bookWriter").val();
        let bookType = $("#bookType").val();
        let beginDate = $("#beginDate").val();
        let endDate = $("#endDate").val();
        let pageSize = $("#pageSize").val();
        $.ajax({
            url:"/test2/book/getBooks",
            type:"get",
            data:{
                "bookName":bookName,
                "bookWriter":bookWriter,
                "bookType":bookType,
                "beginDate":beginDate,
                "endDate":endDate,
                "pageNum":pageNum,
                "pageSize":pageSize
            },
            dataType:"json",
            success:function(data){
                console.log(data);
                let books = data.list;
                for(let i = 0;i<books.length;i++){
                    let book = books[i];
                    let tr = $("<tr></tr>");
                    tr.append(`<td><img src="${"${book.bookCover}"}"></td>`);
                    tr.append("<td>"+book.bookId+"</td>");
                    tr.append("<td>"+book.bookName+"</td>");
                    tr.append("<td>"+book.bookWriter+"</td>");
                    tr.append("<td>"+book.bookType+"</td>");
                    tr.append("<td>"+book.bookPrice+"</td>");
                    tr.append("<td>"+book.pubDate+"</td>");
                    tr.append(`<a onclick="delete1(${"${book.bookId}"})">删除</a>`);
                    $("tbody").append(tr);
                }
                makePageBar(data);
            }
        })
    }
    //jsp中要使用 模板字符串
    function makePageBar(data){
        let pageBar = $("#pageBar");
        pageBar.empty();
        if(data.hasPreviousPage){
            let lastPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum-1}"})">上一页</a>`);
            pageBar.append(lastPage);
        }

        for(let i = 0;i<data.navigatepageNums.length;i++){
            let a = $(`<a href="#" onclick="searchBook(${"${data.navigatepageNums[i]}"})">${"${data.navigatepageNums[i]}"}</a>`);
            if(data.pageNum == data.navigatepageNums[i]){
                a.addClass("red");
                currentPage=data.pageNum;
            }
            pageBar.append(a);
        }
        if(data.hasNextPage){
            let nextPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum+1}"})">下一页</a>`);
            pageBar.append(nextPage);
        }
    }

    function delete1(bookId){
        $.ajax({
            url: "/test2/book/delete",
            type: "post",
            data:{
                "bookId":bookId
            },
            success:function (data){
               if (data=="a"){
                   searchBook(currentPage);
               }else {
                   return false;
               }
            }
        })



    }
</script>
</html>
